<template>
  <div>
    <h1>子组件 ：Ademo</h1>
    <Ademo :title="title" :list="state.list" :msg="state.msg" />
    <hr />
    <h1>子组件：Bdemo</h1>
    <Bdemo :list="state.list"></Bdemo>
    <hr />
    <h1>父组件：Demo home</h1>
  </div>
</template>
<script lang="ts">
import Ademo from './components/Ademo.vue'
import Bdemo from './components/Bdemo.vue'
import { defineComponent, onMounted, reactive, ref } from 'vue'

export type ItemType = { id: number; city: string }

interface ResponseType<T> {
  code: number
  msg: string
  data: T
}

// 定一个一个异步数据

function createData(): Promise<ResponseType<ItemType[]>> {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        code: 0,
        msg: 'success',
        data: [
          { id: 1, city: '上海' },
          { id: 2, city: '北京' },
          { id: 3, city: '山东' }
        ]
      })
    }, 3000)
  })
}

interface StateType {
  list: ItemType[]
  msg: string
}

export default defineComponent({
  components: {
    Ademo,
    Bdemo
  },
  setup() {
    const state: StateType = reactive({
      list: [],
      msg: ''
    })

    const title = ref<string>('我是标题')

    setTimeout(() => {
      title.value = '我是更改后的标题'
    }, 3000)

    const fetchList = async () => {
      const res = await createData()

      state.list = res.data
      state.msg = res.msg
      console.log(state.msg, 'state.list')
    }

    onMounted(() => {
      fetchList()
    })
    return {
      state,
      title
    }
  }
})
</script>
